<template>
  <div class="count-data">
    <Card :style="styles" :bordered="false">
      <p slot="title">
        <Icon :type="icon" size="18"></Icon>
        {{ title }}
      </p>
      <div class="extra" slot="extra">
        <Icon type="md-refresh" size="18" @click.prevent="refresh" color="#fff"></Icon>
        {{ changeTitle }}
      </div>
      <!--填充内容 -->
      <div>
        <slot></slot>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  name: "CountData",
  props: {
    icon: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    changeTitle: {
      type: String,
      default: ""
    },
    value: {
      type: Number,
      default: 0
    },
    background: {
      type: String,
      default: "linear-gradient(to left top, #19ebb7, #37ebcd, #56ebdf, #67eaef, #78eaf7)"
    }
  },

  computed: {
    styles() {
      return {
        borderRadius: "4px",
        background: this.background
      };
    }
  },
  methods: {
    refresh() {
      this.$emit("refresh");
    }
  }
};
</script>

<style lang="stylus" scoped>
.ivu-card {
  height: 100%
}
.ivu-card /deep/ .ivu-card-body {
  height: calc(100% - 50px)
}
.count-data {
  height: 148px
  p {
    color: #fff
  }
  .extra {
    cursor: pointer
  }
}
</style>
